<template>
	<view class="index-page padding20" :style="{'height':`calc(100vh - ${barHeight}px)`,'background-image': `url(${Http_url}/static/images/index_bg.png)`}">
		<view class="index-top acea-row row-between row-top">
			<view class="left">
				<view class="avatar">
					<image :src="userInfo.wx_img"></image>
				</view>
				<view class="user-info">
					<view class="acea-row row-middle">
						<view class="name size18 back font_bold">{{userInfo.wx_name}}</view>
					<!-- 	<view class="level acea-row row-middle">
							<text class="iconfont icon-xingxing"></text>
							<text class="size12 white font_bold">群主</text>
						</view> -->
                        
                        <image class="qun-icon" :src="Http_url + '/static/images/qun.png'"></image>
					</view>
					<view class="phone size15 hui">{{userInfo.tel}}</view>
				</view>
			</view>
			<view class="right acea-row row-right">
				<view class="invite-code acea-row row-center-wrapper white size15" @click="goTo(`/pages/group/user/user-code?id=${courselist[0].id}`)">
					<text>邀请码</text>
					<text class="iconfont icon-xiangyou1"></text>
				</view>
				<view class="jgbox size15 font_bold blod600" :style="{'background-image': `url(${Http_url}/static/images/jg-bg.png)`}">{{userInfo.sysfax}}</view>
				<view class="num-box acea-row row-center-wrapper">
					<view class="num-item">
						<view class="num size21 font_bold blod600">{{zrNum}}</view>
						<view class="txt size12 hui">昨日新增</view>
					</view>
					<view class="line"></view>
					<view class="num-item" @click="goTo(`/pages/group/user/user-list`)">
						<view class="num size21 font_bold blod600 acea-row row-middle row-center">
							<text>{{totalNum}}</text>
							<text class="iconfont icon-xiangyou1 size14"></text>
						</view>
						<view class="txt size12 hui">群员总数</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content shadow bgWhite paddingt20">
			<view class="title padding20">
				<text class="iconfont icon-kechengtixi blod600"></text>
				<text class="txt size15 back font_medium blod600">今日课程</text>
			</view>
			<scroll-view :scroll-y="true" style="height: calc(100% - 80rpx);">
				<view class="listbox">
					<block v-for="(item,index) in courselist" :key="index">
						<view class="item padding20">
							<view class="top acea-row row-middle paddingt20" @click="goTo('/pages/group/video/video?id=' + item.id)">
								<view class="picture">
                                    <view class="list-tag">进行中</view>
                                    <image class="list-play-icon" :src="Http_url + '/static/images/bofang.png'"></image>
									<image :src="adminUrl+item.vi_img"></image>
								</view>
								<view class="item-info" >
									<view class="name size15 back font_medium blod600 ellipsis">{{item.title}}</view>
									<view class="time size12 hui">{{item.kb_date}}</view>
									<view class="batch size12 hui">起播批次{{item.b_title}}</view>
								</view>
							</view>
							<view class="bottom acea-row row-between-wrapper">
								<view class="btn bgHui size12 acea-row row-center-wrapper" @click="goTo(`/pages/group/user/user-join-log?id=${item.id}`)">
									<text class="iconfont icon-shijian"></text>
									<text class="txt">参与记录</text>
								</view>
								<view class="btn bgHui size12 acea-row row-center-wrapper" @click="goTo(`/pages/group/user/user-data?id=${item.id}`)">
									<text class="iconfont icon-shuju"></text>
									<text class="txt">视频数据</text>
								</view>
								<view class="btn bgHui size12 acea-row row-center-wrapper" @click="make(item)">
									<text class="iconfont icon-tupian"></text>
									<text class="txt">生成海报</text>
								</view>
								<view class="btn bgHui size12 acea-row row-center-wrapper" @click="shareCopy(item)">
									<text class="iconfont icon-fenxiang"></text>
									<text class="txt">分享课程</text>
								</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<!-- 生成海报 -->
		<!-- <view class="upoup acea-row row-center-wrapper">
			<view class="upoup-bg"></view> -->
			<view class="mask" v-if="posters" @click="closePosters"></view>
			<view class="mask" v-if="canvasStatus"></view>
			<!-- <view class="mask_transparent" v-if="currentPage" @touchmove="hideNav" @click="hideNav()"></view> -->
			<!-- 海报展示 -->
            
            
            
<!--            
			<view class='poster-pop acea-row row-center-wrapper' v-if="canvasStatus">
				<view>
					<view class="shareImg">
						<image :src='imagePath'></image>
					</view>
				</view>
			</view>
			<view class="canvas">
				<canvas style="width:522rpx;height:926rpx;" canvas-id="firstCanvas"></canvas>
				<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
			</view> -->
            
            
            
            
            
            
		<!-- </view> -->
		<!-- 分享课程 -->
		<view class="upoup acea-row row-center-wrapper" v-if="isShare">
			<view class="upoup-bg"></view>
			<view class="upoup-mid padding20">
				<view class="top acea-row row-between-wrapper">
					<view class="title size18 font_medium blod600"></view>
					<view class="close acea-row row-right row-middle">
						<text class="iconfont icon-guanbi size22 blod600" @click="isShare = false"></text>
					</view>
				</view>
				<view class="main">
					<view class="image">
						<image :src="Http_url+'/static/images/fztop.png'"></image>
					</view>
					<view class="txt size18 blod600 paddingt20 font_medium">课程链接复制成功</view>
					<view class="" style="text-align: left; line-height: 50rpx;">请打开微信，选择分享的好友或微信群，将课程链接粘贴并发送即可。</view>
					<view class="btn" @click="isShare = false">知道了</view>
				</view>
			</view>
		</view>
        
        <PosterPopup ref="PosterPopup"></PosterPopup>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import uQRCode from '@/utils/uqrcode.js'
	import {getLoWatch,getLoadZuo} from '@/api/video.js'
	import {Resource_url,shereBg,Http_url} from '@/config/config.js'
	import {pathToBase64} from "@/libs/image-tools/index.js"
	import {toLogin} from "@/libs/login.js"
	export default {
		computed: mapGetters(['userInfo', 'isLogin', 'globalData', 'uid']),
		components:{
		},
		data() {
			return {
				Http_url:Http_url,
				adminUrl:Resource_url,
				barHeight:0,
				company:'',//几个名称
				zrNum:0,//昨日新增
				totalNum:0,//群员总数
				courselist:[],
				isShare:false,
				posters:false,
				PromotionCode:'',
				imgTop:'',
				imagePath:'',//海报路径
				qrcodeSize:600,
				canvasStatus:false,//是否显示海报
				currentPage:false,
				posterbackgd:shereBg,//海报背景
			}
		},
		onLoad() {
            
			if(!this.isLogin){
				toLogin()
			}else{
				this.barHeight=this.globalData.barHeight
				// this.getMyLoad()
				this.getLoWatch()
				this.getLoadZuo()
			}
		},
		methods: {
            shareCopy(item){
                let _this=this,
                    url =  window.location.origin + `/pages/index/index?id=${item.id}&qun_id=${ this.uid }`
                uni.setClipboardData({
                	data: url,
                	showToast:false,
                	success: function () {
                		_this.isShare=true
                	}
                });
            },
			goTo(url){
				uni.navigateTo({
					url:url
				})
			},
			// 获取今日课程
			getLoWatch(){
				getLoWatch().then(res => {
					this.courselist=res.data
				}).catch(err=>{
					this.$util.Tips({
						title:err
					})
				})
			},
			// 获取统计数量
			getLoadZuo(){
				getLoadZuo().then(res => {
					this.zrNum=res.data.user_zuo_xinz
					this.totalNum=res.data.leiji
				}).catch(err=>{
					this.$util.Tips({
						title:err
					})
				})
			},
			
			//隐藏海报
			posterImageClose: function() {
				this.canvasStatus = false
				this.posters = false;
			},
			/**
			 * 生成海报
			 */
			goPoster: function(item) {
				// console.log('item',item)
				let that = this;
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				that.posters = false;
				let arrImagesUrl = '';
				let arrImagesUrlTop = '';
				// that.make(item)
				// console.log('PromotionCode',that.PromotionCode)
				if (!that.PromotionCode) {
					uni.hideLoading();
					that.$util.Tips({
						title: that.errT
					});
					return
				}				
				setTimeout(() => {
					if (!that.imgTop) {
						uni.hideLoading();
						that.$util.Tips({
							title: '无法生成商品海报！'
						});
						return
					}
				}, 1000);
				uni.downloadFile({
					url: that.imgTop, //仅为示例，并非真实的资源
					success: (res) => {
						arrImagesUrlTop = res.tempFilePath;
						// console.log('11111',arrImagesUrlTop)
						// let arrImages = [that.posterbackgd, arrImagesUrlTop, that.PromotionCode];
						let arrImages = [that.posterbackgd, arrImagesUrlTop, that.PromotionCode];
						let name = item.fx_title;
						// let price = that.productInfo.price;
						setTimeout(() => {
							that.$util.PosterCanvas(
							arrImages, 
							name, 
							// price, 
							// that.productInfo.otPrice,
							function(tempFilePath) {
								console.log('111',tempFilePath)
								that.imagePath = tempFilePath;
								that.canvasStatus = true;
								uni.hideLoading();
							});
						}, 500);
					}
				});
			},
			// 图片预览；
			getpreviewImage: function() {
				if (this.imagePath) {
					let photoList = [];
					photoList.push(this.imagePath)
					uni.previewImage({
						urls: photoList,
						current: this.imagePath
					});
				} else {
					this.$util.Tips({
						title: '您的海报尚未生成'
					});
				}
			},
			// 生成二维码；
			make(item) {
				// this.imgTop = this.adminUrl+item.fx_img
				// this.getImageBase64(this.adminUrl+item.fx_img);
				let href = window.location.origin + '/pages/index/index' + "?id=" + item.id + "&qun_id=" + this.uid;
                
				// uQRCode.make({
				// 	canvasId: 'qrcode',
				// 	text: href,
				// 	size: this.qrcodeSize,
				// 	margin: 10,
				// 	success: res => {
				// 		// console.log('res',res)
				// 		this.PromotionCode = res;
				// 		this.goPoster(item)
				// 	},
				// 	complete: () => {},
				// 	fail: res => {
				// 		this.$util.Tips({
				// 			title: '海报二维码生成失败！'
				// 		});
				// 	}
				// })

                const { userInfo } = this.$store.state.app
                this.$refs['PosterPopup'].open({
                    // 标题
                    title: item.title, 
                    // 图片
                    image: item.img, 
                    // image: 'http://qn.scykzc.cn/qcs/images/Aroma.jpg', 
                    // 头像
                    avatar: userInfo.wx_img,
                    // 昵称
                    nickName: userInfo.wx_name,
    
                    // 二维码地址
                    qrcode: href
                })

        
			},
			getImageBase64: function(images) {
				let that = this;
				pathToBase64(images).then(res=>{
					console.log('imgTop',res)
					that.imgTop = res
				}).catch(err=>{
					this.$util.Tips({
						title: err
					});
				})
				// imageBase64({
				// 	url: images
				// }).then(res => {
				// 	that.imgTop = res.data.code;
				// })
			}
		}
	}
</script>

<style lang="scss">
	.index-page {
		width: 100%;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.index-top{
		margin-bottom: 40rpx;
		.avatar{
			width: 136rpx;
			height: 136rpx;
			border: 4rpx solid #FFFFFF;
			border-radius: 50%;
			overflow: hidden;
		}
		.user-info{
			margin-top: 20rpx;
			.name{
                max-width: 240rpx;
                overflow: hidden; /* 隐藏溢出的文本 */ 
                white-space: nowrap; /* 防止文本换行 */ 
                text-overflow: ellipsis; /* 溢出部分用省略号表示 */
				font-weight: 600;
			}
			.level{
				background-color: #526FFF;
				border-radius: 40rpx;
				padding: 8rpx 10rpx;
				margin-left: 10rpx;
				.iconfont{
					font-size: 18rpx;
					background-color: #FFFFFF;
					border-radius: 50%;
					padding: 4rpx;
					color: #526FFF;
					margin-right: 4rpx;
				}
			}
		}
		.right{
            flex: 1;
			width: 60%;
            flex-direction: column;
            align-items: flex-end;
			.invite-code{
				width: 150rpx;
				height: 52rpx;
				line-height: 52rpx;
				background: rgba(0,0,0,0.4);
				border-radius: 26rpx;
				margin-bottom: 10rpx;
			}
			.jgbox{
				// width: 332rpx;
                padding: 0 20rpx;
                max-width: 420rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;
				margin-right: -20rpx;
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center;
                
                 white-space: nowrap; /* 不换行 */
                  overflow: hidden; /* 超出部分隐藏 */
                  text-overflow: ellipsis;
			}
			.num-box{
				.line{
					width: 2rpx;
					height: 62rpx;
					border: 2rpx solid rgba(0,0,0,0.5);
					margin: 0 30rpx;
				}
				.num-item{
					text-align: center;
					padding: 10rpx 0;
				}
			}
		}
	}
	.content{
		height: calc(100% - 282rpx);
		border-top-left-radius: 28rpx;
		border-top-right-radius: 28rpx;
		.title{
			border-bottom: 2rpx solid rgba(0,0,0,0.05);
			.iconfont{
				font-size: 36rpx;
				margin-right: 10rpx;
			}
		}
		.listbox{
			.item{
				border-bottom: #F2F2F2 20rpx solid;
				.top{
					.picture{
                        position: relative;
						width: 144rpx;
						height: 144rpx;
						border-radius: 20rpx;
						overflow: hidden;
						margin-right: 20rpx;
                        
                        .list-tag{
                            position: absolute;
                            left: 0;
                            top: 0;
                            z-index: 10;
                            background-color: #FEA40B;
                            border-radius: 20rpx 0 20rpx 0;
                            color: #FFFFFF;
                            padding: 0 10rpx;
                            font-size: 20rpx;
                            line-height: 37rpx;
                            height: 37rpx;
                        }
                        
                        .list-play-icon{
                            display: block;
                            position: absolute;
                            top: 53%;
                            left: 50%;
                            z-index: 10;
                            transform: translate(-50%, -50%);
                            width: 60rpx;
                            height: 60rpx;
                        }
					}
					.item-info{
                        flex: 1;
                        width: 0;
						.time{
							padding: 10rpx 0;
						}
						.batch{
							display: inline-block;
							background: rgba(255,165,12,0.43);
							border-radius: 8rpx;
							padding: 6rpx 16rpx;
						}
					}
				}
				.bottom{
					.btn{
						width: 24%;
						border-radius: 28rpx;
						.iconfont{
							margin-right: 6rpx;
						}
					}
				}
			}
		}
	}
	.upoup-bg{
		background-color: rgba(0, 0, 0, 0.5);
	}
	.main{
		text-align: center;
		.image{
			width: 168rpx;
			height: 168rpx;
			margin: 20rpx auto;
		}
		.btn{
			width: 242rpx;
			height: 80rpx;
			line-height: 80rpx !important;
			background: #FEA40B;
			border-radius: 55rpx;
			color: #FFFFFF;
			margin: 40rpx auto;
		}
	}
	.poster-pop{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		text-align: center;
		.shareImg{
			width: 522rpx;
			height: 926rpx;
		}
	}
    
    .qun-icon{
        width: 90rpx;
        height: 36rpx;
        margin-left: 10rpx;
        vertical-align: middle;
    }
	// .canvas{
	// 	position: fixed;
	// 	top: 0;
	// 	left: 0;
	// }
</style>
